<template>
  <div class="home">
    <VueCodemirror v-model="codeRef" default-value="let test='abc'" :read-only="readOnly" />
    <button @click="onChangeCodeContent">外部直接设置编辑器内容</button>
    <button @click="onSetReadOnly">外部设置/取消只读</button>
    是否只读:{{ readOnly }}
    <p>
    <pre>
      {{ codeRef }}
    </pre>
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import VueCodemirror from './VueCodemirror.vue' // @ is an alias to /src

export default defineComponent({
  components: { VueCodemirror },
  setup () {
    const codeRef = ref('')
    const readOnly = ref(false)
    const onChangeCodeContent = () => {
      codeRef.value = 'const test=\'你好世界\';'
    }
    const onSetReadOnly = () => {
      readOnly.value = !readOnly.value
      console.log('xxx', readOnly.value)
    }
    return { codeRef, readOnly, onChangeCodeContent, onSetReadOnly }
  }
})
</script>
